<template>
  <div class="user">
    <div class="form-box">
      <pagesSearch :formConfig="userForm"></pagesSearch>
    </div>
    <div class="content">
      <pagesContent
        :tableConfig="tableConfig"
        pages-name="user"
        @emitHandAddClick="handAddClick"
        @emitHandEditClick="handEditClick"
      ></pagesContent>
      <pagesContentAdd
        ref="pagesModelRef"
        :form-config="addFormData"
        title="添加用户"
        :defaultConfig="defaultConfig"
        page-name="users"
      ></pagesContentAdd>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import pagesSearch from '@/components/pages-search/pages-search.vue'
import { userForm } from '@/views/main/system/user/config/search-type'
import { tableConfig } from '@/views/main/system/user/config/table-config'
import pagesContent from '@/components/pages-content/pages-content.vue'
import { addForm } from '@/views/main/system/user/config/addTable-config'
import pagesContentAdd from '@/components/pages-content-add/pages-content-add.vue'
import { useContentModel } from '@/Hook/use-content-model'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'user-pages',
  components: { pagesSearch, pagesContent, pagesContentAdd },
  setup() {
    //点击添加回调函数
    const addCallback = () => {
      const pwdItem = addForm.find((v) => {
        return v.field == 'password'
      })
      if (pwdItem) {
        pwdItem.isShow = false
      }
    }
    const EditCallback = () => {
      const pwdItem = addForm.find((v) => {
        return v.field == 'password'
      })
      if (pwdItem) {
        pwdItem.isShow = true
      }
    }
    //动态渲染部门角色
    const addFormData = computed(() => {
      const departmentItem = addForm.find((value) => {
        return value.field === 'departmentId'
      })
      if (departmentItem) {
        departmentItem.options = useStore().state.departmentList.map(
          (item: any) => {
            return { label: item.name, value: item.id }
          }
        )
      }
      const roleItem = addForm.find((value) => {
        return value.field === 'roleId'
      })
      if (roleItem) {
        roleItem.options = useStore().state.roleList.map((item: any) => {
          return { label: item.name, value: item.id }
        })
      }
      return addForm
    })
    //点击编辑回调函数
    const [pagesModelRef, defaultConfig, handAddClick, handEditClick] =
      useContentModel(addCallback, EditCallback)
    return {
      userForm,
      tableConfig,
      handAddClick,
      handEditClick,
      pagesModelRef,
      defaultConfig,
      addFormData
    }
  }
})
</script>

<style lang="less" scoped>
.user {
  .form-box {
    border-radius: 4px;
    background: #fff;
  }
  .content {
    margin-top: 20px;
    border-radius: 4px;
    background: #fff;
  }
}
</style>
